/*
 介绍⼀下CSS盒模型
   1、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)
   2、类型：IE盒子模型、标准W3C盒子模型
      标准盒模型的宽高指的是"内容的宽高"
      而IE盒模型的宽高指的是"内容(content)+内边距(padding)+边框(border)"
   3、设置盒模型的方式是：设置box-sizing
     box-sizing：content-box 标准盒模型
     box-sizing：border-box IE盒模型
   4. 盒子模型的定位
     + 网页默认的布局方式 
     + 浮动
     + position定位
     + flex
 */

/*
 display: none 和 visibility:hidden 的区别 
   1、作用不同
    visibility: hidden  将元素隐藏，但是在网页中该占的位置还是占着
    display: none  将元素的显示设为无，即在网页中不占任何的位置
   2、使用后HTML元素有所不同
    visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
    display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
   3、定义不同
    visibility 属性指定一个元素是否是可见的。
    display 这个属性用于定义建立布局时元素生成的显示框类型。
 */

/* 
console.log(1);
setTimeout(function () {
    console.log(2);
}, 0);
new Promise(resolve => {
    console.log(3);
    resolve();
    console.log(4);
}).then(() => {
    console.log(5);
});
console.log(6);
// 输出结果：1 3 4 6 5 2 
*/

/* 
var name = 1;
function test() {
    var name = 2;
    console.log(this.name);
    return function inner() {
        console.log(name);
    }
}
test(); //1
test()(); //1 2
var b = { name: 3 };
b.test = test;
b.test(); //3
var c = b.test;
c(); //1
new test(); //undefined 
*/

/* 
 实现⼀个栈数据结构，接⼝如下，请实现该类的 in、out、top、size 函数
   栈数据结构特点：先进后出
 */
/* class Stack {
    constructor() {
        this.assemble = [];
    }
    in(value) {
        this.assemble.push(value);
    }
    out() {
        return this.assemble.pop();
    }
    top() {
        let assemble = this.assemble,
            len = assemble.length;
        return assemble[len - 1];
    }
    size() {
        return this.assemble.length;
    }
};
const stack = new Stack();
stack.in('x');
stack.in('y');
stack.in('z');
console.log(stack.top());; // 输出 'z' 
console.log(stack.size());; // 输出 3 
console.log(stack.out());; // 输出 'z' 
console.log(stack.top());; // 输出 'y' 
console.log(stack.size());; // 输出 2 */